import React, { Component } from 'react';
import {
  Form, Tag, Table, Icon, Avatar, Input, Badge, Button
} from 'antd';
import Menu from "./Menu";

import '../Task.less';

const { Search } = Input;

/* 排班制---出勤班次
 */
const columns = [
  {
    title: '类型',
    dataIndex: 'key',
    key: '1',
    render: (text) => {
      return <Badge status="warning" text={text} />;
    }
  }, {
    title: '操作人',
    dataIndex: 'name',
    key: '2',
  }, {
    title: '结果',
    dataIndex: 'time',
    key: '3',
  }, {
    title: '日志时间',
    dataIndex: 'time',
    key: '4',
  }];

const dataSource = [{
  key: '任务',
  name: '胡彦斌',
  time: '西湖区湖底公园1号'
}, {
  key: '审批',
  name: '胡彦祖',
  time: '西湖区湖底公园1号'
}, {
  key: '申请',
  name: '胡彦祖',
  time: '西湖区湖底公园1号'
}, {
  key: '项目',
  name: '胡彦祖',
  time: '西湖区湖底公园1号'
}, {
  key: '合同',
  name: '胡彦祖',
  time: '西湖区湖底公园1号'
}];


@Form.create()
export default class TaskDetailTaskDynamics extends Component {
  state = {
    opened: 1,//1开通,2未开能,-1还没加载数据
    selectedTags: [],
  }

  componentDidMount() {
    /* const { dispatch } = this.props;
    dispatch({
      type: 'profile/fetchBasic',
    }); */
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.dispatch({
          type: 'form/submitRegularForm',
          payload: values,
        });
      }
    });
  };
  callback = (key) => {
    console.log(key);
  };

  handleChange(tag, checked) {
    const { selectedTags } = this.state;
    const nextSelectedTags = checked ?
      [...selectedTags, tag] :
      selectedTags.filter(t => t !== tag);
    console.log('You are interested in: ', nextSelectedTags);
    this.setState({ selectedTags: nextSelectedTags });
  }

  /* 验证手机号码 */
  checkPhone = (rule, value, callback) => {
    if (value && !(/^1[0-9]{10}$/).test(value)) {
      callback('请输入正确的手机号码！');
    } else {
      callback();
    }
  };

  /* 操作日志 */
  renderLogs = () => {
    return (<div className="comment panel">
      <div className="title">
        操作日志
      </div>
      <Table pagination={false} dataSource={dataSource} columns={columns} />
    </div>);
  }

  /* 反馈 */
  renderComment = () => {
    return (<div className="comment panel">
      <div className="title">
        反馈<em>（共158条）</em>
      </div>
      <div className="input">
        <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
        <Search placeholder="添加..." enterButton="发送" />
      </div>
      <div className="fjlist">
        <div className="list-item">
          <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
          <div className="title">
            海纳 <em>一周前</em>
          </div>
          <div className="content">
            <p>多已开始执行任务，xxxx地方一切正常</p>
            <div className="img-list">
              <div>
                <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="" />
              </div>
              <div>
                <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="" />
              </div>
              <div>
                <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div className="more">查看更多</div>
      </div>
    </div>);
  }

  /* 开通后 */
  renderOpened = () => {
    return (
      <div className="TaskDetail ">
        <div className="TaskDetailTaskDynamics">
          {/* 反馈 ---------------*/}
          {this.renderComment()}
          {/* 日志 ---------------*/}
          {this.renderLogs()}
        </div>
      </div>
    );
  }
  /* 未开通 */
  renderUnOpened = () => {
    return (<div className="TaskDetail ">
      <div className="TaskDetailTaskDynamics-unopened">
        <div className="imgbg">
          <p>您还没开通任务动态视图</p>
        </div>
        <Button type="primary">立即开通</Button>
      </div>
    </div>


    );
  }

  render() {
    let view = <div />;
    if (this.state.opened === 1) {
      view = this.renderOpened();
    }
    if (this.state.opened === 2) {
      view = this.renderUnOpened();
    }
    return view;
  }
}

